import React, {Component} from 'react';
import LoginForm from '../../app/component/login/LoginForm';
import RegisterUserInfo from '../../app/component/register/RegisterUserInfo';

class Index extends Component {
    constructor(props) {
        super(props);
        this.changeForm = this.changeForm.bind(this);
        this.goRegister = this.goRegister.bind(this);
        this.state = {
            isLogin: true
        }
    }

    changeForm() {
        let isLogin = this.state.isLogin;
        if (isLogin) {
            return <LoginForm history={this.props.history} goRegister={this.goRegister}/>;
        } else {
            return <RegisterUserInfo history={this.props.history}/>;
        }
    }

    goRegister() {
        this.setState({
            isLogin: false
        });
    }

    render() {
        const Form = this.changeForm();
        return (
            <div id="index" style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
                <div>
                    <div id="login">
                        {Form}
                    </div>
                </div>
            </div>
        );
    }
}

export default Index;
